import React, { FC, ReactElement, useState, useEffect, ReactNode } from 'react';
import './index.less';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { CSSTransition } from 'react-transition-group';

interface IProp {
  headerBg?: string; // 折叠框头部背景颜色
  headerTitle: string; // 折叠框头部标题
  showHeaderIcon?: boolean; // 头部左侧默认图标是否显示
  headerExtra?: ReactNode; // 头部右侧内容
  contentBg?: string; // 折叠框内容背景
  openState: boolean; // 折叠看打开状态
  onClick: ()=>void; // 点击头部事件
  children?: any;
}

const CollapseCom: FC<IProp> = (props): ReactElement => {
  const [isClear, setIsClear] = useState(true);
  const changeShowState = () => {
    if (!isClear) {
      return;
    }
    setIsClear(false);
    props.onClick();
    setTimeout(() => {
      setIsClear(true);
    }, 1000);
  };
  // useEffect(() => {}, []);
  const {
    headerBg,
    headerTitle,
    showHeaderIcon,
    headerExtra,
    contentBg,
    openState,
  } = props;

  const { titleSize, rightContentBox } = initStyle;
  return (
    <>
      <div className="collapsebox">
        <div
          className="collapseHeaderBox"
          style={{ background: headerBg || '#f7f7f7' }}
          onClick={() => {
            changeShowState();
          }}
        >
          {showHeaderIcon && (
            <div>{openState ? <UpOutlined /> : <DownOutlined />}</div>
          )}
          <div style={titleSize}>{headerTitle}</div>
          <div style={rightContentBox}>{headerExtra}</div>
        </div>
        <CSSTransition
          in={openState}
          timeout={500}
          classNames="alert"
          unmountOnExit
        >
          <div
            className={'collapseContentBox'}
            style={{ background: contentBg || '#fff' }}
          >
            {props.children}
          </div>
        </CSSTransition>
      </div>
    </>
  );
};
export default CollapseCom;
const initStyle = {
  titleSize: {
    fontSize: '16px',
    fontWeight: '550',
  },
  rightContentBox: {
    marginLeft: 'auto',
  },
};
